<template>
  <el-form ref="form" :model="form" label-width="80px">
    <el-form-item label="标题">
      <el-input v-model="form.title"></el-input>
    </el-form-item>
    <!-- 富文本框 -->
    <vue-editor v-model="form.content" :useCustomImageHandler="true" @image-added="imgUpload"></vue-editor>
    <!-- {{form.content}} -->
    <!-- list-type 类型固定式照片墙 -->
    <!-- action 是上传接口地址 -->
    <div>封面</div>
    <el-upload
      :action="$axios.defaults.baseURL + '/upload'"
      :headers="{
        Authorization: 'Bearer ' + token
      }"
      :file-list="form.cover"
      list-type="picture-card"
      :on-success="coverSuccess"
      :on-remove="coverRemove"
    >
      <i class="el-icon-plus"></i>
    </el-upload>
    <!-- 栏目 -->
    <el-form-item label="栏目">
      <el-checkbox-group v-model="checkList">
        <el-checkbox :label="item.id" v-for="(item,index) in data" :key="index">{{item.name}}</el-checkbox>
      </el-checkbox-group>
    </el-form-item>
    <!-- 文章类型 -->
    <el-form-item label="文章类型">
      <el-radio-group v-model="form.type">
        <el-radio :label="1">文章</el-radio>
        <el-radio :label="2">视频</el-radio>
      </el-radio-group>
    </el-form-item>
    <el-button type="primary" @click="submit">立即发布</el-button>
  </el-form>
</template>

<script>
import { VueEditor } from "vue2-editor";
export default {
  components: {
    VueEditor
  },

  data() {
    return {
      form: {
        categories: [],
        cover: [],
        title: "",
        type: 1,
        content: ""
      },
      checkList: [],
      data: [],
      token: localStorage.getItem("token")
    };
  },
  watch: {
    checkList() {
      console.log(this.checkList);
      console.log(123);

      this.form.categories = this.checkList.map(res => {
        return {
          id: res
        };
      });
    }
  },
  methods: {
    coverSuccess(res, file) {
      // 上传组件成功上传可以接受三个参数
      // res 请求结果
      // file 文件本身
      // fileList 文件列表
      // 1. 需要将 file 文件放入 this.form.cover 数组里面
      // 2. 我们的封面需要 id 这个 id 是从服务器传回来的
      console.log(res.data);

      file.id = res.data.id;
      this.form.cover.push(file);
      console.log("上传封面成功");
    },
    coverRemove(file, fileList) {
      // 删除图片时可以接受两个参数
      // file 文件本身
      // FileList 文件列表
      // 这里没有请求, 也没有 id 的需求
      // 只需要将最新列表放到 form 即可
      this.form.cover = fileList;
      console.log("删除图片成功");
    },
    imgUpload(file, Editor, cursorLocation, resetUploader) {
      const fileData = new FormData();
      fileData.append("file", file);
      this.$axios.post("/upload", fileData).then(res => {
        Editor.insertEmbed(
          cursorLocation,
          "image",
          this.$axios.defaults.baseURL + res.data.data.url
        );
        // 另一个固定写法，插入图片后必须复原上传组件
        console.log(res.data.data.url);
        resetUploader();
      });
      // console.log(this);
    },
    submit() {
      if (this.$route.query.id) {
        this.$axios
          .post("/post_update/" + this.$route.query.id, this.form)
          .then(res => {
            console.log(res);
            if (res.data.message == "文章编辑成功") {
              this.$message(res.data.message);
            }
          });
      } else {
        this.$axios.post("/post", this.form).then(res => {
          console.log(res);
          if (res.data.message == "文章发布成功") {
            this.$message(res.data.message);
          }
        });
      }
    }
  },
  created() {
    this.$axios.get("/category").then(res => {
      this.data = res.data.data.filter((res, index) => {
        return index > 1 && index <= 20;
      });
      console.log(this.data);
    });
    if (this.$route.query.id) {
      this.$axios.get("/post/" + this.$route.query.id).then(res => {
        console.log(res);
        this.form = res.data.data;
        this.checkList = this.form.categories.map(res => {
          return res.id;
          // this.form.content.replace(/"div"/g, "p");
        });
        // 数据里面的 cover 地址需要添加基准路径
        const newCover = this.form.cover.map(img => {
          const newImg = { ...img };
          if (newImg.url.indexOf("http") == -1) {
            newImg.url = this.$axios.defaults.baseURL + newImg.url;
          }
          return newImg;
        });
        this.form.content = this.form.content.replace(/div/g, "p");
        this.form.cover = newCover;
      });
    }

    console.log(this.$route.query.id);
  }
};
</script>

<style></style>
